<template>
  <div class="mainBody">
    <div class="content">
      <div id="main-box">
        <div id="left-box">
          <div id="left-top-box" class="div-box">
            <el-button class="ca-btn" size="small" @click="selectFh('+')">+</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('-')">-</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('*')">*</el-button>
            <el-button class="ca-btn" size="small" @click="selectFh('/')">/</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('1')">1</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('2')">2</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('3')">3</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh('(')">(</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('4')">4</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('5')">5</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('6')">6</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh(')')">)</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('7')">7</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('8')">8</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('9')">9</el-button>
            <el-button class="ca-btn" size="small" @click="selectNum('0')">0</el-button>
            <el-button class="ca-btn" size="small" @click="selectKh('√')">√</el-button>
          </div>
        </div>
        <div id="right-box" v-loading="loading" class="div-box">
          <div class="area-header">
            <span class="area-header-title">{{ $t('选择指标') }}</span>
          </div>
          <div>
            <ul v-for="(item,index) in parameterRuleList" :key="index">
              <li class="pcw-key-li" @click="selectZb(item)">{{ item.ruleName }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <el-col :span="24">
          <el-input v-model="formulaName" readonly :placeholder="$t('配置公式')" style="margin-top: 10px;" />
        </el-col>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button @click="resetFormula">{{ $t("重置") }}</el-button>
      <el-button v-hasPermi="['company:pcw:edit']" type="primary" @click="confirmData">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  props: {
    companyId: {
      type: String,
      required: true
    },
    formula: {
      type: Object,
      required: true
    },
    showDate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {},
      // 关键指标基础科目
      detailOne: [],
      evaluationDetailThree: [],
      // 查询参数
      queryParams: {
        tableType: '',
        companyId: this.companyId,
        typeId: this.$route.query.typeId
      },
      // 基金评估模板表格数据
      parameterRuleList: [],
      // 指标类型
      zhibiao: '',
      // 公式name
      formulaName: '',
      // 公式code
      formulaCode: '',
      // 区分上一季、上一年
      cycleDate: '',
      // 区别上一公式结尾是数字还是指标还是操作符
      qubie: ''
    }
  },
  watch: {
    formula: {
      handler(newVal) {
        this.resetFormula()
        this.formulaName = newVal.name ? newVal.name : ''
        this.formulaCode = newVal.code ? newVal.code : ''
        this.parameterRuleList = newVal.parameterRules ? newVal.parameterRules : []
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // getAllData({ parentId: '0' }).then(response => {
    //   this.parameterRuleList = response.rows
    //   this.total = response.total
    //   this.loading = false
    // })
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        tableType: undefined,
        keyCode: undefined,
        keyName: undefined,
        sort: undefined
      }
      this.resetForm('form')
    },
    // 根据一级菜单获取二级三级
    loadKeyDetails(index) {
      this.loading = true
      this.evaluationDetailThree = []
        this.parameterRuleList[index].children.forEach(detailTwo => {
        detailTwo.children.forEach(detailThree => {
          this.evaluationDetailThree.push(detailThree)
        })
      })
      this.loading = false
    },
    // 选择操作符号
    selectFh(fh) {
      if (this.qubie !== '' && this.qubie !== 'fh' && this.qubie !== 'zkh') {
        this.formulaName += fh
        this.formulaCode += fh
        this.qubie = 'fh'
      } else {
        this.errorMsg()
      }
    },
    // 选择括号
    selectKh(kh) {
      if (kh === '(') {
        // 如果上一次的元素不是左括号并且不是右括号并且不能是指标，反之则公式错误
        if (this.qubie !== 'ykh' && this.qubie !== 'zb' && this.qubie !== 'sz') {
          this.formulaName += kh
          this.formulaCode += kh
          this.qubie = 'zkh'
        } else {
          this.errorMsg()
        }
      } else if (kh === ')') {
        // 如果上一次的元素不是左括号并且不是右括号并且不是符号，反之则公式错误
        if (this.qubie !== '' && this.qubie !== 'zkh' && this.qubie !== 'fh') {
          this.formulaName += kh
          this.formulaCode += kh
          this.qubie = 'ykh'
        } else {
          this.errorMsg()
        }
      } else {
        // 到这里选择的是根号 自动添加一个左括号
        this.formulaCode += 'sqrt('
        this.formulaName += kh + '('
        this.qubie = 'zkh'
      }
    },
    // 选择了数字
    selectNum(num) {
      // 如果上一次的元素不是有指标并且不是右括号，反之则公式错误
      if (this.qubie !== 'zb' && this.qubie !== 'ykh') {
        this.formulaName += num
        this.formulaCode += num
        this.qubie = 'sz'
      } else {
        this.errorMsg()
      }
    },
    // 选择了指标
    selectZb(row) {
      console.log(row)
      // 如果上一次的元素不是右括号并且不是数字并且不是指标，反之则公式错误
      if (this.qubie !== 'ykh' && this.qubie !== 'sz' && this.qubie !== 'zb') {
        if (row.isImplClass === '0') {
          this.formulaCode += '#SQL{' + row.ruleName + '}'
          this.formulaName += row.ruleName
        } else if (row.isImplClass === '1') {
          this.formulaCode += '#IMPL{' + row.ruleName + '}'
          this.formulaName += row.ruleName
        }
        // this.formulaCode += code
        // this.formulaCode += '#1BS{' + code + '}'
        // this.formulaName += name + this.changeName(this.cycleDate)

        this.qubie = 'zb'
      } else {
        this.errorMsg()
      }
    },
    // 改变公式code
    changeZb(cycleDate, code) {
      if (cycleDate === '1') {
        return 'lastDate.' + code
      } else if (cycleDate === '2') {
        return 'lastMonth.' + code
      } else if (cycleDate === '3') {
        return 'lastQuarter.' + code
      } else if (cycleDate === '4') {
        return 'lastYear.' + code
      }
    },
    // 改变展示公式名称
    changeName(cycleDate) {
      if (cycleDate === '1') {
        return this.$t('(上一期)')
      } else if (cycleDate === '2') {
        return this.$t('(上一月)')
      } else if (cycleDate === '3') {
        return this.$t('(上一季)')
      } else if (cycleDate === '4') {
        return this.$t('(上一年)')
      } else {
        return this.$t('(本次)')
      }
    },
    // 展示公式错误信息
    errorMsg() {
      Notification.error({
        title: this.$t('此操作会导致公式错误！')
      })
    },
    // 重置按钮
    resetFormula() {
      this.subjects = []
      this.formulaName = ''
      this.formulaCode = ''
      this.cycleDate = ''
      this.qubie = ''
      this.zhibiao = ''
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    /** 提交按钮 */
    confirmData() {
      if (this.formulaName === '') {
        Notification.error({
          title: this.$t('请选择公式！')
        })
      } else {
        this.$parent.$parent.addFormula(this.formulaName, this.formulaCode)
        this.$parent.$parent.formOpen = false
      }
    }
  }
}
</script>
